<template>
  <div id='app'>
    <div class="header">登录页面</div>
    <div class="sss">
      <p>      昵称:<input type="text" placeholder="请输入昵称" v-model="user" @input="input1"></p>
<p> 手机:<input type="text" placeholder="请输入手机号" v-model="tel" @input="input2"></p>
     <p>      密码:<input type="password" placeholder="请输入密码" v-model="password" @input="input3"></p>
  <van-button size="small" type="info" class="bu" v-show="!fel" @click="dl">登录</van-button>
  <van-button size="small" disabled  type="info" class="bu" v-show="fel">登录</van-button>
    </div>

  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [],
      user:'',
      tel:'',
      password:'',
      fel:true
    }
  },
  methods: {
    input1(){
      if(this.user.length>0 && this.tel.length>0&&this.password.length>0){
        this.fel=false
      }else{
        this.fel=true
      }
      
    },input2(){
      if(this.user.length>0 && this.tel.length>0&&this.password.length>0){
        this.fel=false
      }else{
        this.fel=true
      }
    },input3(){
     if(this.user.length>0 && this.tel.length>0&&this.password.length>0){
        this.fel=false
      }else{
        this.fel=true
      }
    },
    dl(){
     
      this.$axioss.get('/username.json').then(res=>{
        if(res.data.name==this.user && res.data.tel==this.tel && res.data.password==this.password){
          this.$router.push({path:'/about',query:{user:this.user}})

        }else{
          alert('密码错误重新输入')
          return
        }
      })
    }


  },
  mounted() {

  },
  components: {

  }
}
</script>

<style lang='scss'>
.header{
  width: 100%;
  height: 60px;
  background-color: palegreen;
  display: flex;
  justify-content: center;
  align-items: center;
}
.sss{
  width: 100%;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.bu{
  margin-top: 20px
}

</style>
